<template>
  <el-dialog title="选择用户" v-model="visible" append-to-body width="700" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')" class="select-dialog">
    <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="drawerForm" label-width="100px" label-position="top">
      <el-row :gutter="15">
        <el-col :span="12">
          <el-form-item label="筛选条件">
            <el-input class="input" v-model="keyword" placeholder="账号/姓名/手机">
              <template #suffix>
                <el-icon-search style="width: 20px; height: 20px; cursor: pointer" @click="btnFindUser"></el-icon-search>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属部门">
            <jd-cascader v-model="deptId" :apiObj="$API.system.dept.tree" :apiProps="{label:'label',value: 'id', expandTrigger: 'hover'}" style="width: 100%;" placeholder="请选择..."></jd-cascader>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="24">
          <el-form-item label="选择用户" prop="userName">
            <jd-table-select ref="table" v-model="users" :table-width="640" :apiObj="apiObj" :params="params" :multiple="multiple" clearable collapse-tags collapse-tags-tooltip :props="props" style="width: 100%;">
              <el-table-column prop="memberId" label="序号"></el-table-column>
              <el-table-column prop="nickName" label="姓名"></el-table-column>
              <el-table-column prop="phone" label="手机号"></el-table-column>
            </jd-table-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-scrollbar class="usersScroll">
        <el-row v-if="users.length == 0">
          <el-col :span="24">
            <el-empty description="请选择至少一个用户" :image-size="100"></el-empty>
          </el-col>
        </el-row>
        <el-row v-else>
          <template v-if="!multiple">
            <el-col :span="8" class="users-col">
              <div class="users-card">
                <el-row type="flex" align="middle" class="users-rows">
                  <el-col :span="24" class="body__wrap">
                    <div>
                      <div class="name">{{ users.nickName }}</div>
                      <div class="phone">{{ users.phone }}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </template>
          <template v-else>
            <el-col :span="8" class="users-col" v-for="(item,index) in users" :key="item">
              <div class="users-card">
                <el-row type="flex" align="middle" class="users-rows">
                  <el-col :span="24" class="body__wrap">
                    <div>
                      <div class="name">{{ item.nickName }}</div>
                      <div class="phone">{{ item.phone }}</div>
                    </div>
                  </el-col>
                </el-row>
              </div>
            </el-col>
          </template>
        </el-row>
      </el-scrollbar>
    </el-form>
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()" :disabled="users.length==0">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script>
export default {
  emits: ["success", "closed"],
  props: {
    multiple: { type: Boolean, default: true },
	},
  data() {
    return {
      mode: "post",
      modelValue: null,
      visible: false,
      isSaveing: false,
      keyword: '',
      deptId: '',
      appId: '',
      apiObj: this.$API.system.member.list,
      params: {},
      users: [],
      value: [],
      props: {
        label: 'nickName',
        value: 'memberId',
        dept: "",
        keyword: ""
      }
    }
  },
  watch:{
    // 部门筛选会员
    deptId: function(depts){
      if (Array.isArray(depts)){
        var deptId = depts[depts.length - 1];
        this.findUserByDept(deptId);
      }
    }
  },
  mounted() {

  },
  methods: {
    open(mode) {
      this.mode = mode
      this.visible = true
      return this
    },
    // 显示窗口
    open(modelValue, mode = "post") {
      this.mode = mode;
      this.modelValue = modelValue;
      this.visible = true;
      return this
    },
    open(modelValue, mode = "post", appId) {
	  this.params={"dept":modelValue}
      this.mode = mode;
      this.modelValue = modelValue;
      this.appId = appId;
      this.visible = true;
      return this
    },
    // 筛选用户
    btnFindUser(){
      this.params.keyword = this.keyword;
      this.$refs.table.reload();
    },
    // 筛选部门
    findUserByDept(deptId){
      this.params.dept = deptId;
      this.$refs.table.reload();
    },
    // 表单提交方法
    async submit() {
		console.log(this.mode)
      this.isSaveing = true;
      var ids;
      if (!this.multiple){
        ids = this.users.memberId;
      } else {
        ids = this.users.map(item =>{
          return item.memberId;
        });
      }

      var res;
      if (this.mode == "post") {
        res = await this.$API.system.member.addUserPost.post(this.modelValue,ids);
      } else if (this.mode == "role") {
        res = await this.$API.system.member.addUserRole.post(this.modelValue,ids);
      } else if (this.mode == "dept") {
          res = await this.$API.system.dept.setDeptAdmin.post({"deptId":this.modelValue,"memberId":ids});
      } else if (this.mode == "approle") {
        res = await this.$API.app.appStore.addAppRoleUser.post(this.modelValue,ids,this.appId);
      }else if (this.mode ==  "menu"){
		  this.$emit("success",this.users)
		  this.visible = false;
		  this.isSaveing = false;
		  return;
	  }
      this.isSaveing = false;
      if (res.code  == 200){
        this.$emit("success");
        this.visible = false;
        this.$message.success("操作成功");
      } else {
        this.$alert(res.msg, "提示", { type: "error" });
      }
    },
    //表单注入数据
    async setData(data) {
      Object.assign(this.form, data)
    }
  }
}
</script>

<style lang="scss" scoped>
.select-dialog{
  .el-form-item{
    padding-top: 0px;
    padding-bottom: 10px;
  }

  .usersScroll{height: 250px;overflow: hidden !important;}

  .users-col{padding-right: 15px;}
  .users-col:nth-child(3n) {padding-right: 0px;}

  .users-card {
    position: relative;
    cursor: pointer;
    border: solid 1px #e4e7ed;
    padding: 8px;
    margin: 8px 0px;
    .users-rows {
      justify-content: space-between;
      align-items: center;
      position: relative;
      box-sizing: border-box;
      cursor: pointer;
      height: 50px;
      .body__wrap {
        display: flex;
        align-items: center;
        color: var(--el-text-color-regular);
        .name {
          font-size: 16px;
          font-weight: bolder;
          margin-bottom: 5px;
        }
        .phone {
          width: 100%;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
